<% layout('/layouts/default.html', {title: '', libs: ['dataGrid']}){ %>
<div>
    <div class="header bgcw">
        <div class="date">
            <span id="thisYear" class="date-border">2026</span>
            <!--暂时去掉,2023年开放-->
            <span id="lastYear">2028</span>
        </div>
        <div class="cut-time">
            截止时间：<span id="nowTime">2022-03-31 13:49:36</span>
        </div>
    </div>

    <div class="main">
        <div class=" box1">
            <div class="col-md-7 left">
                <div class="box1-h">
                    逾期未反馈通报
                </div>
                <div class="box1-t">
                    <div class="box1-t-s">
                        <span>共有
                            <span class="w700 yqwfk">
                            0
                            </span>
                            项逾期未反馈情况。
                        </span>
                    </div>

                    <div class="box1-t-e">
                        <span id="msg1">查看详情</span>
                    </div>
                </div>
                <div class="box-b yqwfk-b">

                </div>
                <div class="pic pic1">
                    <img src="${ctxStatic}/m/images/wujilu.png">
                    <p>暂无数据</p>
                </div>
            </div>
            <div class="col-md-5 right">
                <div class="box1-h">
                    总体督办事项数量
                </div>
                <div class="bullNum ">
                    <ul class="totalDuban">


                    </ul>
                    <div class="pic pic2">
                        <img src="${ctxStatic}/m/images/wujilu.png">
                        <p>暂无数据</p>
                    </div>
                </div>
            </div>
            <div class="col-md-7 left1">
                <div class="box1-h">
                    进度滞后通报
                </div>
                <div class="box1-t">
                    <div class="box1-t-s">
                        <span>共有
                            <span class="w700 wdbtb">
                            0
                            </span>
                            项进度滞后情况。
                        </span>
                    </div>

                    <div class="box1-t-e">
                        <span id="msg2">查看详情</span>
                    </div>
                </div>
                <div class="box-b wdbtb-b">
                    <!--                    <div class="bullList pink">-->
                    <!--                        <p>市委办公室</p>-->
                    <!--                        <span>-->
                    <!--                            11-->
                    <!--                            <b>-->
                    <!--                                项-->
                    <!--                            </b>-->
                    <!--                        </span>-->
                    <!--                    </div>-->

                </div>
                <div class="pic pic3">
                    <img src="${ctxStatic}/m/images/wujilu.png">
                    <p>暂无数据</p>
                </div>

            </div>
            <div class="col-md-5 right1">
                <div class="box1-h">
                    单位承担督办事项TOP10排名
                </div>
                <div class="bullNum ">
                    <ul class="TopDuban">

                    </ul>
                </div>
                <div class="pic pic4">
                    <img src="${ctxStatic}/m/images/wujilu.png">
                    <p>暂无数据</p>
                </div>
            </div>
        </div>


    </div>


</div>
<% } %>
<script>
    let thisYear = new Date().getFullYear()
    let lastYear = new Date().getFullYear() - 1
    $('#thisYear').text(thisYear)
    $('#lastYear').text(lastYear)
    $('#nowTime').text(js.formatDate(new Date(),'yyyy-MM-dd HH:mm:ss'))
    window.localStorage.setItem('DateTime', thisYear)
    $('.date span').click(function () {
        let index = $(this).index();
        var DateTime = 0
        if (index == 0) {
            //DateTime='2022'
            window.localStorage.setItem('DateTime', thisYear)
            $('.yqwfk-b').empty()
            $('.totalDuban').empty()
            $('.wdbtb-b').empty()
            $('.TopDuban').empty()
            yq()
            total()
            wd()
            top1()
        } else {
            //DateTime='2021'
            window.localStorage.setItem('DateTime', lastYear)
            $('.yqwfk-b').empty()
            $('.totalDuban').empty()
            $('.wdbtb-b').empty()
            $('.TopDuban').empty()
            yq()
            total()
            wd()
            top1()
        }
        $(this).addClass('date-border').siblings().removeClass("date-border");
    })

    var yq = function () {
        $.ajax({
            type: 'get',
            url: "${ctx}/home/supIndex/queryFive",
            data: {
                taskYear: window.localStorage.getItem('DateTime')
            },
            success: function (res) {
                var list = res.list
                var number = res.valueList
                var lengthL1 = list.length
                if (lengthL1==0){
                    $("#msg1").attr("onclick", "dataTotal(0)")
                }else {
                    $("#msg1").attr("onclick", "dataTotal()")
                }
                var count=0;
                window.localStorage.setItem('pid', lengthL1);
                list.forEach(function (item) {
                    count=item.value+count;
                    $('.yqwfk-b').append(
                        '<div class="bullList" onclick="dataTotal('+item.nameId+')">' +
                        '<p>' +
                        item.name +
                        '</p>' +
                        '<span>' +
                        item.value +
                        '项</span>' +
                        '</div>'
                    )
                })

                if (list.length <= 0) {
                    $('.pic1').show()
                    $('.yqwfk').html(0)
                } else {
                    $('.pic1').hide()
                    $('.yqwfk').html(count)
                }
            }
        })
    }
    yq()


    //总体督办事项数量
    var total = function () {
        $.ajax({
            type: 'get',
            url: "${ctx}/home/supIndex/querySeven",
            data: {
                taskYear: window.localStorage.getItem('DateTime')
            },
            success: function (res) {
                var totalList = res.list
                var lengthR1 = totalList.length
                var totalValue = totalList[0].value
                window.localStorage.setItem('uid', totalValue == 0 ? 0 : lengthR1);
                if (totalValue == 0) {
                    $('.pic2').show()
                    return
                } else {
                    $('.pic2').hide()
                }
                totalList.forEach(function (item) {
                    $('.totalDuban').append(
                        '<li>' +
                        '<div class="numtext">' +
                        item.name +
                        '</div>' +
                        '<div class="numtext1">' +
                        item.value +
                        '</div>' +
                        '<div>' +
                        '<div class="progress">' +
                        ' <div class="progress-bar " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: ' + (item.value / totalValue) * 100 + '%;background-color: #3e86ff">' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</li>'
                    )
                })
            }
        })
    }
    total()

    var wd = function () {
        $.ajax({
            type: 'get',
            url: "${ctx}/home/supIndex/querySix",
            data: {
                taskYear: window.localStorage.getItem('DateTime')
            },
            success: function (res) {
                var list1 = res.list
                var number1 = res.valueList
                if (list1.length==0){
                    $("#msg2").attr("onclick", "dataTotal2(0)")
                }else {
                    $("#msg2").attr("onclick", "dataTotal2()")
                }
                $('.wdbtb').html(number1[0])
                window.localStorage.setItem('pid1', list1.length);
                var count=0;
                list1.forEach(function (item) {
                    count=item.value+count;
                    $('.wdbtb-b').append(
                        '<div class="bullList pink" onclick="dataTotal2('+item.nameId+')">' +
                        '<p>' +
                        item.name +
                        '</p>' +
                        '<span>' +
                        item.value +
                        '项</span>' +
                        '</div>'
                    )
                })

                if (list1.length <= 0) {
                    $('.pic3').show()
                    $('.wdbtb').html(0)
                } else {
                    $('.pic3').hide()
                    $('.wdbtb').html(count)
                }

            }
        })
    }
    wd()

    //单位承担督办事项TOP10排名
    var top1 = function () {
        $.ajax({
            type: 'get',
            url: "${ctx}/home/supIndex/queryNine",
            data: {
                taskYear: window.localStorage.getItem('DateTime')
            },
            success: function (res) {
                var totalList = res.list
                var lengthR1 = totalList.length
                if (totalList.length > 0) {
                    var totalValue = totalList[0].value
                }
                if (totalList.length == 0) {
                    $('.pic4').show()
                } else {
                    $('.pic4').hide()
                }
                totalList.forEach(function (item) {
                    $('.TopDuban').append(
                        '<li>' +
                        '<div class="numtext">' +
                        item.name +
                        '</div>' +
                        '<div class="numtext1">' +
                        item.value +
                        '</div>' +
                        '<div>' +
                        '<div class="progress">' +
                        ' <div class="progress-bar " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: ' + (item.value / totalValue) * 100 + '%;background-color: #1abd6e">' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</li>'
                    )
                })
            }
        })
    }
    top1()

    //逾期未反馈详情
    function dataTotal(id){
        if (id==null){
            js.addTabPage( null,'逾期未反馈事项', '${ctx}/home/supIndex/supIndexFive?taskYear='+window.localStorage.getItem('DateTime'), true, true);
        }else {
            js.addTabPage( null,'逾期未反馈事项', '${ctx}/home/supIndex/supIndexFive?leaderOrgCode='+id+'&taskYear='+window.localStorage.getItem('DateTime'), true, true);
        }
    }

    //未达标通报详情
    function dataTotal2(id){
        if (id==null){
            js.addTabPage( null,'进度滞后事项', '${ctx}/home/supIndex/supIndexSix?taskYear='+window.localStorage.getItem('DateTime'), true, true);
        }else {
            js.addTabPage( null,'进度滞后事项', '${ctx}/home/supIndex/supIndexSix?leaderOrgCode='+id+'&taskYear='+window.localStorage.getItem('DateTime'), true, true);
        }
    }
</script>

<style>
    .totalDuban {
        padding-left: 20px!important;
    }
    .TopDuban{
        padding-left: 20px!important;
    }
    green {
        background-color: #1abd6e !important;
    }

    .pink {
        background-color: #ffe9e9 !important;
        color: #ff4d4d !important;
    }

    ul {
        list-style: none;
    }

    .numtext {

        float: left;
max-width: 18vw;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .numtext1 {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        font-weight: 700;
    }

    .pic {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }

    .pic img {
        margin: 20px 30%;
    }

    ul li {
        height: 25px;
        line-height: 25px;
        margin-bottom: 15px;
        padding: 0 2px;
        position: relative;
    }

    .bgcw {
        background-color: #fffefe;
    }

    .progress {
        height: 8px;
        border-radius: 10px;
        width: 30%;
        position: absolute;
        top: 12%;
        left: 70%;
        background-color: #fffefe;
    }

    .progress-bar {
        border-radius: 10px !important;
        background-color: #3e86ff;
    }

    .header {
        width: 100%;
        height: 60px;
        margin-bottom: 10px;
    }

    .date {
        position: relative;
        float: left;
        height: 100%;

    }

    .date span {

        display: inline-block;
        height: 60px;
        line-height: 60px;
        margin: 0 20px;
        font-size: 16px;
        cursor: pointer;
    }

    .date-border {
        border-bottom: 1px solid #1F69E6;
    }

    .cut-time {
        position: absolute;
        right: 10px;
        float: left;

        line-height: 60px;
        color: #acacac;
        font-size: 14px;
    }

    .main {
        width: 100%;


    }

    .box2 {
        display: none;
    }

    .col-md-7 {
        /*padding: 0px 0px 0px 0px !important;*/
        background-color: #fffefe;
        border-radius: 5px;
        margin: 0px 5px 10px 0px;
        height: 417px;
        overflow: auto;
    }

    .col-md-5 {
        /*padding: 0px!important;*/
        background-color: #fffefe;
        border-radius: 5px;
        margin: 0px -5px 10px 0px;
        height: 417px;
        overflow: auto;
    }

    .box1-h {
        line-height: 20px;
        vertical-align: top;
        width: 220px;
        height: 20px;
        color: #1f69e6;
        margin: 10px 0 15px 20px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
    }

    .box1-t {
        background-color: #f8f8f8;
        width: 70%;
        height: 44px;
        line-height: 44px;
        padding: 0 20px;
        margin: 0 auto;
        text-align: center;
        justify-content: space-between;
        font-size: 14px;
        border-radius: 22px;
        display: flex;
    }

    .box1-t-s {
        font-size: 14px;
        color: #515a6e;
        letter-spacing: 2px;
    }

    .w700 {
        font-weight: 700;
    }

    .box1-t-e {
        font-size: 14px;
        cursor: pointer;
        color: #1f69e6;
    }

    .box-b {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .bullList {
        width: 31%;
        height: 90px;
        margin-top: 20px;
        border-radius: 4px;
        margin: 20px .9% 10px 1.2%;
        -webkit-box-shadow: 0 0 6px 0 rgb(105 108 109 / 29%);
        box-shadow: 0 0 6px 0 rgb(105 108 109 / 29%);
        cursor: pointer;
        background-color: #fff6dc;
        color: #ffc000;
    }

    .bullList p {
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        padding: 0 10px;
        font-size: 14px;
        font-weight: 400;
        color: #515a6e;
        text-align: left;
    }

    .bullList span {
        display: inline-block;
        width: 100%;
        height: 35px;
        line-height: 35px;
        font-size: 24px;
        text-align: center;
    }

    .bullList span b {
        font-size: 14px;
    }

    .bullNum {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding-top: 8px;
    }
</style>